<template>
	<view class="order">
		<view class="order-item" v-for="(item,index) in  OrderList" :key="index">
			<view v-if="item.orderItemList.length!=0">
				<view class="timeAndOrderID">
					<view>{{item.createTime | formatCreateTime}}</view>
					<view>订单号:{{item.orderSn}}</view>
					<view style="color: #ff3c01;">
						<text v-show="item.status==0">待付款</text>
						<text v-show="item.status==1">待发货</text>
						<text v-show="item.status==2">已收货</text>
						<text v-show="item.status==3">已完成</text>
						<text v-show="item.status==4">无效订单</text>
					</view>
				</view>

				<view class="product" v-for="(i,index) in item.orderItemList" :key="index">
					<view class="image">
						<image :src="i.productPic" mode=""></image>
					</view>
					<view class="item-Title">
						<view class="item-Title-top">
							<view>
								<view>{{i.productName}}</view>
								<view style="color: gray;">
									{{ skuPdata(i.productAttr) }}
								</view>
							</view>
							<view style="padding-top: 10rpx;padding-right: 10rpx; color: gray;">
								<view style="">
									￥{{ i.productPrice}}
								</view>
								<view style="text-align: right;">
									x{{i.productQuantity}}
								</view>
							</view>
						</view>
						<view class="item-Title-bottm">
							<view style="display: flex;padding-left: 10rpx;">
								<!-- <view>实际付款:￥{{ item.payAmount }}</view> -->
							</view>
						</view>
					</view>
				</view>

				<view class="serve">
					<view style="display: flex;padding-right: 20rpx;">
						<view>实际付款:￥
							<view style="display: inline-block;color: #ef0f0f;font-weight: 700;">{{ item.payAmount }}
							</view>
						</view>
					</view>
					<view class="serve-item" @tap="serve">
						<text v-show="item.status==0">去付款</text>
						<text v-show="item.status==1">催发货</text>
						<text v-show="item.status==2">快递跟踪</text>
						<text v-show="item.status==3">去评价</text>
						<text v-show="item.status==4">删除</text>
					</view>

				</view>
			</view>

		</view>

	</view>
</template>

<script>
	import {
		formatDate
	} from '@/utils/Time.js'
	export default {
		props: ["OrderList"],
		data() {
			return {

			}
		},
		onLoad() {

		},
		filters: {
			formatCreateTime(time) {
				let date = new Date(time);
				return formatDate(date, 'yyyy-MM-dd hh:mm:ss')
			}
		},
		methods: {
			skuPdata(sku) {
				let arr = [];
				JSON.parse(sku).forEach((item) => {
					arr.push(item.value);
				});
				return arr.join("+");
			},
			serve() {
				uni.showToast({
					title: "敬请期待！",
					icon: 'loading'
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.order {
		width: 100%;

		.order-item {
			// height: 600rpx;
			width: 98%;
			margin: 10rpx auto;
			border-radius: 10rpx;
			background-color: white;
			box-shadow: 0 0 10rpx gainsboro;

			.timeAndOrderID {
				height: 50rpx;
				display: flex;
				border-bottom: 1px solid gainsboro;
				font-size: 20rpx;
				justify-content: space-between;

				view:nth-child(1) {}

				view:nth-child(2) {
					padding-left: 15rpx;
					color: gray;
				}

			}

			.product {
				height: 200rpx;
				border-bottom: 1px solid gainsboro;
				display: flex;

				image {
					height: 200rpx;
					width: 200rpx;
				}

				.item-Title {
					flex: 1;

					.item-Title-top {
						height: 130rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;
						flex-wrap: wrap;

						view:nth-child(1) {
							flex: 1;
							// overflow:hidden;
							// // word-wrap:break-word;
							// word-break: break-all;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box; //使用自适应布局
							-webkit-line-clamp: 2; //设置超出行数，要设置超出几行显示省略号就把这里改成几
							-webkit-box-orient: vertical;
						}

						view:nth-child(2) {}
					}

					.item-Title-bottm {
						display: flex;
						justify-content: space-between;
						align-items: center;

						view:nth-child(1) {
							font-size: 30rpx;
							color: red;
							font-weight: 700;
						}

						.advance {
							display: flex;

							span {
								text-align: center;
								display: block;
								height: 40rpx;
								width: 40rpx;
								line-height: 40rpx;
								border: 1px solid gainsboro;
								border-radius: 20rpx;
								margin: 0 10rpx;
								box-shadow: 0 0 10rpx gainsboro;
							}
						}
					}
				}

			}

			.serve {
				height: 80rpx;
				display: flex;
				justify-content: flex-end;
				padding: 10rpx 0;
				padding-right: 10rpx;
				text-align: center;
				line-height: 70rpx;

				.serve-item {
					text-align: center;
					height: 60rpx;
					width: 150rpx;
					line-height: 60rpx;
					background-image: linear-gradient(to right, orangered, #e82222, red);
					color: white;
					border-radius: 30rpx;
					cursor: pointer;
				}
			}
		}
	}
</style>
